<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 条纹表格</title>
    <!-- bootstrap 相关 * 3 -->
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<!-- bootstrap 分页插件 -->
    <script src="/js/bootstrap-paginator.js"></script>
	<!-- tmpl 前端模版引擎 -->
    <script src="/js/jquery.tmpl.min.js"></script>
    <!-- 公共样式 -->
    <link type="text/css" rel="styleSheet"  href="/css/common.css" />

    <script src="/js/sweetalert.min.js"></script>
    <link href="/css/sweetalert.css" rel="stylesheet">
</head>
<body>

<button type="button" class="btn btn-default" onclick="add();">
    <span class="glyphicon glyphicon-plus"> 新增</span>
</button>

<button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-leaf" onclick="javascript:window.location.href='http://start.spring.io/'"> 浏览器地址变更</span>
</button>

<table class="table table-striped">
    <caption>条纹表格布局</caption>
    <thead>
        <tr>
            <th>id</th>
            <th>名称</th>
            <th>备注</th>
            <th>时间</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody id="data_list">
        <tr>
            <th>{{= id}}</th>
            <th>{{= cityName}}</th>
            <th>{{= description}}</th>
            <th>{{= time}}</th>
            <th>
                <a href="javascript:edit({{= id}})">编辑</a>
                <a href="javascript:del({{= id}})">删除</a>
                <a href="javascript:browse({{= id}})">详情</a>
            </th>
        </tr>
    </tbody>
</table>

<ul id="pagination"></ul>

<!-- 模态框（Modal） -->
<div class="modal" id="ID_ReformDetail">
    <div class="modal-dialog">
        <div class="modal-content">

        </div>
    </div>
</div>

</body>

<script>

    function add() {
        $('#ID_ReformDetail').modal({
            backdrop: 'static', 
            remote:   '/city/add',
            keyboard: false
        });
    }

    function edit(id) {
        $('#ID_ReformDetail').modal({
            backdrop: 'static', 
            remote:   '/city/edit/' + id,
            keyboard: false
        });
    }

    function del(id) {
        swal({
            title:               "确定删除?",     // 弹出框的title
            text:                "",             // 弹出框里面的提示文本
            type:                "warning",      // 弹出框类型
            confirmButtonColor:  "#337ab7",      // 确定按钮颜色
            closeOnConfirm:      false,          // 单击确定后是否关闭弹窗
            showCancelButton:    true,           // 是否显示取消按钮
            showLoaderOnConfirm: true,           // 提交后显示等待 logo
            
            confirmButtonText:   "确定",         // 确定按钮上面的文本
            cancelButtonText:    "取消",         // 取消按钮文本

        }, function(){
            $.ajax({
                type:     'post',
                dataType: 'json',
                url:      '/city/delete/' + id,
                success: function (data) {
                    if(data.result){
                        swal({
                            type:              'success',
                            title:             '操作成功',
                            text:              '',
                            confirmButtonText: '确定'     // 确定按钮上面的文本
                        }, function(){
                            loadTmpl(1);
                        })
                    }else{
                    	swal({
                            type:              'error',
                            title:             '操作失败',
                            text:              data.resultString,
                            confirmButtonText: '确定'     // 确定按钮上面的文本
                        })
                    }
                    /* swal(
                      '操作失败',
                      data.resultString,
                      'error'
                    ) */
                },
                error: function () {
                    swal(
                        '操作失败',
                        '请检查代码和网络',
                        'error'
                    )
                }
            });
        })
    }

    function browse(id) {
        $('#ID_ReformDetail').modal({
            backdrop: 'static', 
            remote:   '/city/browse/' + id,
            keyboard: false
        });
    }

    $(function () {
    
    	// 默认加载第一页
        loadTmpl(1);

        // 模态框关闭时清除数据
        $('#ID_ReformDetail').on('hide.bs.modal', function () {
            // 执行一些动作...
            $(this).removeData("bs.modal");
        })

    });

    // 加载分页:入参页码
    function loadTmpl(pageNum){

        $.ajax({
            type:"POST",
            dataType:"json",
            url:"/city/searchpageajax",
            data:{ pageNum : pageNum },
            // async:false,
            success:function(data){
                
                // 分页数据填充
                // $("#data_list").tmpl(data.resultList).appendTo('#data_list');
                tmplDataBindTo("#data_list", data.resultList);
                
                // 分页页码填充
                var options = {
                    bootstrapMajorVersion: 3,
                    alignment:'center',
                    currentPage:data.pageNum,
                    numberOfPages:5,
                    totalPages: data.totalPage,
                    onPageClicked: function(event, originalEvent, type, page){
                    	// 绑定分页页码请求
                        loadTmpl(page);
                    }
                };
                $(document).ready(function(){
                   $("#pagination").bootstrapPaginator(options);
                });
                
            },
            error:function(error){
                alert("error");
            }
        });
    }

    // 木星提供该方法
    function tmplDataBindTo(c, d) {
        d = $(c).tmpl(d);
        $(c).empty();
        $(c).show();
        d.appendTo(c)
    }

</script>

</html>